{extend name='common@layout/seller' /}
{block name="left"}{include file='goods/left'}{/block}
{block name="breadcrumb"}
<div class="ncsc-path"><i class="icon-desktop"></i>商家管理中心<i class="icon-angle-right"></i>商品<i class="icon-angle-right"></i>关联版式</div>
{/block}
{block name='content'}
<script src="/old/data/resource/js/jquery.ajaxContent.pack.js?v1.2"></script>
<style type="text/css">
    .ncsc-form-default dl dt { width: 16%;}
    .ncsc-form-default dl dd { width: 82%;}
</style>

<div class="tabmenu">
    <ul class="tab pngFix">
        <li class="normal"><a href="{:url('seller/plate/index')}">版式列表</a></li>
        <li class="active"><a>添加版式</a></li>
    </ul>
</div>
<div class="ncsc-form-default">
    <form method="post" action="{:url('seller/plate/modify')}" id="plate_form">
        <input type="hidden" name="p_id" value="{$item.plate_id ?? '0'}"/>
        <dl>
            <dt><i class="required">*</i>版式名称：</dt>
            <dd>
                <input type="text" class="text w200" name="p_name" value="{$item.plate_name ?? ''}" id="p_name" maxlength="10"/>
                <p class="hint">请输入10个字符内的名称，方便商品发布 / 编辑时选择使用。</p>
            </dd>
        </dl>
        <dl>
            <dt><i class="required">*</i>版式位置：</dt>
            <dd id="gcategory">
                <ul class="ncsc-form-radio-list">
                    <li><label><input type="radio" name="p_position" id="p_position" value="1" class="radio" {eq name='item.plate_position' value="1"}checked="checked"{/eq} />顶部</label></li>
                    <li><label><input type="radio" name="p_position" id="p_position" value="0" class="radio" {neq name='item.plate_position' value="1"}checked="checked"{/neq}/>底部</label></li>
                </ul>
                <p class="hint">选择关联版式插入到页面中的位置，选择“顶部”为商品详情上方内容，“底部”为商品详情下方内容。</p>
            </dd>
        </dl>
        <dl>
            <dt><i class="required">*</i>版式内容：</dt>
            <dd>
                <textarea id="p_content" name="p_content" style="width:100%;height:480px;visibility:hidden;">{$item.plate_content ?? ''}</textarea>
                <script src="/old/data/resource/kindeditor/kindeditor-min.js" charset="utf-8"></script>
                <script src="/old/data/resource/kindeditor/lang/zh_CN.js" charset="utf-8"></script>
                <script>
                    var KE;
                    KindEditor.ready(function (K) {
                        KE = K.create("textarea[name='p_content']", {
                            items: ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
                                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                                'superscript', '|', 'selectall', 'clearhtml', 'quickformat', '|',
                                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'],
                            cssPath: "/old/data/resource/kindeditor/themes/default/default.css",
                            allowImageUpload: false,
                            allowFlashUpload: false,
                            allowMediaUpload: false,
                            allowFileManager: false,
                            syncType: "form",
                            afterCreate: function () {
                                var self = this;
                                self.sync();
                            },
                            afterChange: function () {
                                var self = this;
                                self.sync();
                            },
                            afterBlur: function () {
                                var self = this;
                                self.sync();
                            }
                        });
                        KE.appendHtml = function (id, val) {
                            this.html(this.html() + val);
                            if (this.isCreated) {
                                var cmd = this.cmd;
                                cmd.range.selectNodeContents(cmd.doc.body).collapse(false);
                                cmd.select();
                            }
                            return this;
                        }
                    });
                </script>
                <p class="hr8">
                    <a class="ncsc-btn" nctype="show_desc" href="{:url('seller/album/pic_list?item=des&inajax=1')}"><i class="icon-picture"></i>插入相册图片</a>
                    <a href="javascript:void(0);" nctype="del_desc" class="ncsc-btn ml5" style="display: none;"><i class=" icon-circle-arrow-up"></i>关闭相册</a>
                </p>
                <p id="des_demo"></p>
            </dd>
        </dl>
        <div class="bottom">
            <label class="submit-border"><input type="submit" class="submit" value="提交"/></label>
        </div>
    </form>
</div>
<script>
    $(function () {
        $('#plate_form').validate({
            submitHandler: function (form) {
                ajaxpost('plate_form', '', '', 'onerror');
            },
            rules: {
                p_name: {
                    required: true,
                    maxlength: 10
                },
                p_content: {
                    required: true
                }
            },
            messages: {
                p_name: {
                    required: '<i class="icon-exclamation-sign"></i>请填写版式名称',
                    maxlength: '<i class="icon-exclamation-sign"></i>版式名称不能超过10个字符'
                },
                p_content: {
                    required: '<i class="icon-exclamation-sign"></i>请填写版式内容'
                }
            }
        });

        $('a[nctype="show_desc"]').ajaxContent({
            event: 'click',
            loaderType: "img",
            loadingMsg: SHOP_TEMPLATES_URL + "/images/loading.gif",
            target: '#des_demo'
        }).click(function () {
            $(this).hide();
            $('a[nctype="del_desc"]').show();
        });
        $('a[nctype="del_desc"]').click(function () {
            $(this).hide();
            $('a[nctype="show_desc"]').show();
            $('#des_demo').html('');
        });
    });
    function insert_editor(file_path) {
        KE.appendHtml('p_content', '<img src="' + file_path + '">');
    }
</script> 
{/block}